<template>
  <div class="home">
    <!-- 导航栏 -->
    <van-nav-bar class="app-nav-bar">
      <van-button
        slot="title"
        class="search-btn"
        icon="search"
        type="info"
        round
        size="small"
        to="/search"
        >搜索</van-button
      >
    </van-nav-bar>

    <!-- 文章频道列表 -->
    <!-- 标签页组件 只有你第一次查看标签页的时候才会渲染里面的内容 -->
    <van-tabs class="channel-tabs" v-model="active">
      <van-tab :title="item.name" v-for="item in channels" :key="item.id">
        <!-- 文章列表 -->
        <article-list :channel="item"></article-list>
        <!-- /文章列表 -->
      </van-tab>
      <!-- 汉堡按钮把最后的位置挡住了，添加一个占位元素 -->
      <div slot="nav-right" class="Placeholder"></div>
      <!-- tab最右边的插槽 -->
      <div
        slot="nav-right"
        class="wap-nav-wrap"
        @click="isChannelEditshow = true"
      >
        <van-icon name="wap-nav" />
      </div>
    </van-tabs>

    <!-- 弹出层 -->
    <van-popup
      v-model="isChannelEditshow"
      position="bottom"
      class="channel-edit-popup"
      closeable
      close-icon-position="top-left"
      get-container="body"
    >
      <!-- 模板中的 $event 表示事件参数 -->
      <channel-edit
        :user-channels="channels"
        :current-index="active"
        @close="isChannelEditshow = false"
        @update-active="active = $event"
      ></channel-edit>
    </van-popup>
    <!-- 挂载到 body 节点下 -->
    <!-- /弹出层 -->
  </div>
</template>

<script>
import { getUserChannels } from "@/api/user";
import articleList from "./components/article-list";
import channelEdit from "./components/channel-edit";
import { mapState } from "vuex";
import { getItem } from "@/utils/storage";

export default {
  name: "home",
  components: {
    articleList,
    channelEdit,
  },
  data() {
    return {
      // 控制被激活的标签
      active: 0,
      // 频道列表
      channels: [],
      // 控制编辑频道的显示状态
      isChannelEditshow: false,
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  created() {
    this.loadChannels();
  },
  methods: {
    // 请求获取频道数据
    async loadChannels() {
      let channels = [];
      if (this.user) {
        // 已经登录，获取线上的用户列表数据
        const { data } = await getUserChannels();
        channels = data.data.channels;
      } else {
        // 没有登录，判断是否有本地存储的列表数据
        const localChannels = getItem("user-channels");
        if (localChannels) {
          channels = localChannels;
        } else {
          // 请求获取默认推荐的频道列表 (这个接口不一定要登录)
          const { data } = await getUserChannels();
          channels = data.data.channels;
        }
      }

      this.channels = channels;
    },
  },
};
</script>

<style scoped lang="less">
.home {
  /deep/ .van-nav-bar__title {
    max-width: none;
  }
  .search-btn {
    width: 555px;
    height: 64px;
    background-color: #5babfb;
    font-size: 28px;
    border: none;
  }
  .van-button--small {
    font-size: 28px;
  }
  .van-icon {
    font-size: 32px;
  }

  .channel-tabs {
    /deep/ .van-tab {
      border-bottom: 1px solid #cecece;
    }
    /deep/ .van-tabs__line {
      bottom: 40px;
      width: 45px !important;
      height: 6px;
      background: #2891ff;
    }
  }

  .Placeholder {
    width: 60px;
    // 不参与 flex 分配
    flex-shrink: 0;
  }

  .wap-nav-wrap {
    position: fixed;
    right: -1px;
    width: 66px;
    height: 87px;
    font-weight: 600;
    color: #0872e4;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 3px solid #eee;
    .van-icon {
      font-size: 50px;
    }
  }
}
.channel-edit-popup {
  height: 100%;
}
</style>